<template>
  <div id="index">
    <!-- 左侧主页 -->
    <LeftMain></LeftMain>
    <!-- 默认右侧主页 -->
    <transition name='myFadeRight'>
    <Main v-if="RP=='main'"></Main>
    <!-- 全部文章 -->
    <!-- <allArticle v-if="RP=='all-article'"></allArticle> -->
    <!-- 前端技术文章 -->
    <!-- <allArticle v-if="RP=='front-article'"></allArticle> -->
    <!-- 图形技术文章 -->
    <!-- <allArticle v-if="RP=='gui-article'"></allArticle> -->
    <!-- 全栈开发文章 -->
    <tipsArticle :tips='tips' v-else></tipsArticle>
    </transition>
    <!-- 杂谈笔记文章 -->
    <!-- <tipsArticle v-if="RP=='tattle-article'" :tips='ztbj'></tipsArticle> -->
    <!-- 文章详情-->
    <!-- <Details v-if="RP=='details'"></Details> -->
  </div>
</template>
<script>
import Main from '@/components/rightmain'
import LeftMain from '@/components/leftmain'
import Details from '@/components/details'
import tipsArticle from '@/components/switch/menu-all-article'
// import 'vue2-animate/dist/vue2-animate.css'

export default {
  name: 'Index',
  components: {
    Main,
    LeftMain,
    tipsArticle,
    Details
  },
  data () {
    return {
    }
  },
  computed: {
    RP () {
      return this.$store.state.rigthPage
    },
    // 根据tips进行右侧组件的切换
    tips () {
      let tipsArr = this.$store.state.rigthPage.split('-')
      let tips = ''
      // console.log(this.$store.getters.getTips, 222)
      switch (tipsArr[2]) {
        case 'qzkf':
          tips = '全栈开发'
          break
        case 'ztbj':
          tips = '杂谈笔记'
          break
        default:
          tips = tipsArr[2]
      }
      return tips
    }
  },
  beforeRouteEnter (to, from, next) {
    document.title = to.meta.title
    next()
  }
}
</script>
<style scoped lang='less'>
@import '../assets/index.less';
.myFadeRight-enter-active {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-name: "fadeInRight";
          animation-name: "fadeInRight";
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none; }
}
</style>
